<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <meta name="twitter:site" content="@metroui">
    <meta name="twitter:creator" content="@pimenov_sergey">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="Metro 4 Components Library">
    <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png">

    <meta property="og:url" content="https://metroui.org.ua/v4/index.html">
    <meta property="og:title" content="Metro 4 Components Library">
    <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="968">
    <meta property="og:image:height" content="504">

    <meta name="author" content="Sergey Pimenov">
    <meta name="description" content="Are you tired of Bootstrap? Get started with Metro 4, the popular framework for building responsive, mobile-first sites in Metro style, with the Metro CDN and a template starter page. The most popular HTML, CSS, and JS library in Metro style.">
    <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework">

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">
    <link href="highlight/styles/github.css" rel="stylesheet">
    <link href="docsearch/docsearch.min.css" rel="stylesheet">
    <link href="css/site.css" rel="stylesheet">

    <title>Metro 4 Support - Popular HTML, CSS and JS library</title>

    <style>
        @media all and (min-width: 768px) {
            .hero {
                padding: 160px 80px 120px;
            }

            .neb-white {
                height: auto;
                z-index: 4;
            }
        }
    </style>
</head>
<body class="m4-cloak" style="padding-top: 52px">

    <div class="container-fluid pos-fixed fixed-top z-top bg-hero" id="header">
        <header class="app-bar container bg-transparent fg-white pos-relative" data-role="appbar" data-expand-point="md">
            <a href="index.html" class="brand fg-white no-hover text-bold">METRO_4</a>
            <ul class="app-bar-menu ml-auto text-upper">
                <li><a href="index.html" class="app-bar-item">Home</a></li>
                <li><a href="intro.html" class="app-bar-item">Get Started</a></li>
                <li><a href="m4q-about.html" class="app-bar-item">Components</a></li>
                <li><a href="examples.html" class="app-bar-item">Examples</a></li>
                <li><a href="support.html" class="app-bar-item">Support</a></li>
                <li><a href="https://github.com/olton/Metro-UI-CSS" class="app-bar-item">GitHub</a></li>
            </ul>
        </header>
    </div>

    <div class="hero hero-bg text-center">

        <div class="display4 fg-white"><span class="reduce-3 enlarge-3-md">Metro_4</span></div>

        <div class="text-center m-8">
            <a href="intro.html" class="button bg-transparent bg-darkRed-hover fg-white m-1 text-upper outline bd-lightRed">Get started</a>
            <a href="https://github.com/olton/Metro-UI-CSS" class="button bg-transparent bg-darkRed-hover fg-white m-1 text-upper outline bd-lightRed">Source Files</a>
            <a href="https://builder.metroui.org.ua" class="button bg-transparent bg-darkRed-hover fg-white m-1 text-upper outline bd-lightRed">Build own set</a>
        </div>

        <h2 class="fg-white mt-10"><span class="reduce-1 enlarge-md">Support Development</span></h2>
        <div class="container mt-10 text-leader fg-white pl-5-fs pr-5-fs pl-20-md pr-20-md">
            <p class=" reduce-1 enlarge-1-md">
            Metro 4 is an MIT licensed open source project and completely free to use.
            <br>However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.
            </p>
        </div>

    </div>

    <div class="container-fluid bg-white fg-dark pt-10 pb-20 neb neb-white">
        <div class="container">
            <div class="h1 text-light">Support methods:</div>

            <div class="row mt-10">
                <div class="cell-md-6 mt-4">
                    <div class="border bd-default p-4 h-100 text-center">
                        <h3 class="mt-5 mb-5">Patreon</h3>
                        <hr>
                        <p>
                            Recurring pledges come with exclusive perks, e.g. having your name listed in the Metro 4 GitHub repository, or have your company logo placed on this website.
                        </p>

                        <div class="mt-4">
                            <a href="https://www.patreon.com/bePatron?u=8975658" class="button alert large text-upper d-inline-flex flex-align-center flex-justify-center"><img src="images/patreon.png" class="mr-2"> Become a Patron</a>
                        </div>

                        <p class="text-bold">
                            With your help, I can make Metro 4 even better!
                        </p>
                    </div>
                </div>
                <div class="cell-md-6 mt-4">
                    <div class="border bd-default p-4 h-100 text-center">
                        <h3 class="mt-5 mb-5">Open collective</h3>
                        <hr>
                        <p>
                            Recurring pledges come with exclusive perks, e.g. having your name listed in the Metro 4 GitHub repository, or have your company logo placed on this website.
                        </p>

                        <div class="mt-4">
                            <a href="https://opencollective.com/metro4" class="button info large text-upper d-inline-flex flex-align-center flex-justify-center"><img src="images/open-collective.png" class="mr-2"> Become a Patron</a>
                        </div>

                        <p class="text-bold">
                            With your help, I can make Metro 4 even better!
                        </p>
                    </div>
                </div>
            </div>
            <div class="row mt-10">
                <div class="cell-md-6 mt-4">
                    <div class="border bd-default p-4 h-100">
                        <h3 class="mt-5 mb-5">Swift USD</h3>
                        <hr>
                        <table class="table text-left striped">
                            <thead>
                            <tr>
                                <th>BENEFICIARY:</th>
                                <th>PIMENOV SERHII, Ukraine, c. Kyiv, st. Anny Akhmatovoi, build. 33, fl. 12</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>IBAN:</td>
                                <td>UA073220010000026200308119777</td>
                            </tr>
                            <tr>
                                <td>ACCOUNT:</td>
                                <td>5375418804708220</td>
                            </tr>
                            <tr>
                                <td>BANK OF BENEFICIARY:&nbsp;</td>
                                <td>JSC UNIVERSAL BANK, KYIV, UKRAINE, SWIFT-CODE/BIC: UNJSUAUKXXX</td>
                            </tr>
                            <tr>
                                <td>INTERMEDIARY BANK:&nbsp;</td>
                                <td>DEUTSCHE BANK TRUST CO. AMERICAS, NEW YORK, USA, SWIFT-CODE/BIC: BKTRUS33XXX</td>
                            </tr>
                            <tr>
                                <td>CORRESPONDENT ACCOUNT:&nbsp;</td>
                                <td>4452477</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="cell-md-6 mt-4">
                    <div class="border bd-default p-4 h-100">
                        <h3 class="mt-5 mb-5">Swift EURO</h3>
                        <hr>
                        <table class="table text-left striped">
                            <thead>
                            <tr>
                                <th>BENEFICIARY:</th>
                                <th>PIMENOV SERHII, Ukraine, c. Kyiv, st. Anny Akhmatovoi, build. 33, fl. 12</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>IBAN:</td>
                                <td>UA803220010000026203308039597</td>
                            </tr>
                            <tr>
                                <td>ACCOUNT:</td>
                                <td>5375419903354486</td>
                            </tr>
                            <tr>
                                <td>BANK OF BENEFICIARY:&nbsp;</td>
                                <td>JSC UNIVERSAL BANK, KYIV, UKRAINE, SWIFT-CODE/BIC: UNJSUAUKXXX</td>
                            </tr>
                            <tr>
                                <td>INTERMEDIARY BANK:&nbsp;</td>
                                <td>DEUTSCHE BANK AG, FRANKFURT, GERMANY, SWIFT-CODE/BIC: DEUTDEFFXXX</td>
                            </tr>
                            <tr>
                                <td>CORRESPONDENT ACCOUNT:&nbsp;</td>
                                <td>100 9469990 0000</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="row mt-10">
                <div class="cell-md-6 mt-4">
                    <div class="border bd-default p-4 h-100">
                        <h3 class="mt-5 mb-5">SEPA EURO</h3>
                        <hr>
                        <table class="table text-left striped">
                            <thead>
                            <tr>
                                <th>ACCOUNT HOLDER:</th>
                                <th>PIMENOV SERHII</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>IBAN:</td>
                                <td>GB61CLJU00997180121989</td>
                            </tr>
                            <tr>
                                <td>BIC:</td>
                                <td>CLJUGB21</td>
                            </tr>
                            <tr>
                                <td>BANK</td>
                                <td>Clear Junction Limited, 15 Kingsway, London WC2B 6UN</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="cell-md-6 mt-4">
                    <div class="border bd-default p-4 h-100">
                        <h3 class="mt-5 mb-5">PayPal</h3>
                        <hr>
                        <div class="remark alert">
                            Currently not available in Ukraine :(
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid bg-light pt-10 pb-20 neb neb-light">
        <div class="container text-center">
            <h3 class="mt-10">Sponsors</h3>
            <ul class="mt-5 unstyled-list d-block flex-justify-center">
                <li class="m-4"><a href="https://www.patreon.com/user/creators?u=27819336" style="font-size: 42px" class="text-bold fg-dark no-decor">Steve</a></li>
            </ul>

            <h6 class="mt-10">Backers</h6>
            <ul class="mt-5 unstyled-list h5">
                <li><a href="https://www.patreon.com/user/creators?u=13947239">Arnaud Dagnelies</a></li>
                <li><a href="https://www.patreon.com/user/creators?u=33581561">ProJee</a></li>
                <li><a href="https://www.patreon.com/user/creators?u=35477827">Abdelaziz Maaded</a></li>
                <li><a href="https://www.patreon.com/user/creators?u=28475416">Enrique Flores</a></li>
            </ul>

            <hr>
            <h6 class="mt-10">Over the years, the project was supported:</h6>
            <ul class="mt-5 unstyled-list text-small">
                <li>Open Builds</li>
                <li>Infinity Technology</li>
                <li>Triple Beta</li>
                <li>Riku</li>
                <li>Jonathan</li>
                <li>Hebert Alves</li>
                <li>Mike</li>
                <li>Arnaud Dagnelies</li>
                <li>Walter Sassano</li>
                <li>Chaoswriter96</li>
                <li>chongzia</li>
                <li>TorakikiSan</li>
                <li>Walter Sassano</li>
                <li>Interactivity</li>
                <li>Matthew Bezuidenhout</li>
                <li>Petr Jahoda</li>
                <li>Marcel Wehrstedt</li>
                <li>Steve</li>
                <li>ProJee</li>
                <li>Abdelaziz Maaded</li>
                <li>Enrique Flores</li>
            </ul>
        </div>
    </div>

    <div class="container-fluid feature-bg pt-10 pb-20 neb neb-feature">
        <div class="container text-center">

            <div class="h1 m-10"><span class="reduce-1 enlarge-1-md">Why sponsor?</span></div>
            <div class="text-leader">
                <p class="reduce-1 enlarge-1-md pl-5-fs pr-5-fs pl-20-md pr-20-md">
                    If you run a business and is using Metro 4 (Metro UI CSS) in a revenue-generating product, it would make business sense to sponsor Metro 4 development: it ensures the project that your product relies on stays healthy and actively maintained.
                </p>
            </div>
            <hr class="mt-10 mb-10 w-50" style="background-color: #E1E1E1">
            <!-- ads-html -->
            <hr class="mt-10 mb-10 w-50" style="background-color: #E1E1E1">
            <div class="text-leader2">
                <p class="reduce-1 enlarge-1-md pl-5-fs pr-5-fs pl-20-md pr-20-md">
                    Of course, individual users are also welcome to make a recurring pledge if Metro 4 (Metro UI CSS) has helped you in your work or personal projects.
                </p>
            </div>

        </div>
    </div>

    <div class="container-fluid bg-white fg-dark">
        <div class="container pt-10 pb-20">
            <div class="h1 mt-10 text-center"><span class="reduce-1 enlarge-1-md">Special thanks to</span></div>

            <div class="row special-thanks">
                <div class="cell-md-2">
                    <a href="https://olshansky.ua/"><img src="images/olshansky.svg"></a>
                </div>
                <div class="cell-md-2">
                    <a href="https://www.imena.ua/"><img src="images/imena_logo.png"></a>
                </div>
                <div class="cell-md-2">
                    <a href="https://mirohost.net/"><img src="images/mirohost_logo.svg"></a>
                </div>
                <div class="cell-md-2">
                    <a href="https://www.keycdn.com/"><img src="images/keycdn-logo.svg"></a>
                </div>
                <div class="cell-md-2">
                    <a href="https://www.jetbrains.com/"><img src="images/jetbrains.svg"></a>
                </div>
            </div>
        </div>
    </div>

    <footer class="footer-bg">
        <div class="container pt-20 pb-20">
            <div class="text-center">
                <ul class="inline-list reduce-1" id="social-menu">
                    <li><a href="https://www.facebook.com/groups/metro4.libary/"><span class="mif-facebook"></span></a></li>
                    <li><a href="https://twitter.com/MetroUI"><span class="mif-twitter"></span></a></li>
                    <li><a href="#"><span class="mif-youtube"></span></a></li>
                    <li><a href="https://github.com/olton/Metro-UI-CSS"><span class="mif-github"></span></a></li>
                </ul>
            </div>

            <div class="text-center mt-10">
                <ul class="inline-list reduce-1" id="footer-menu">
                    <li><a href="https://github.com/olton/Metro-UI-CSS/blob/master/LICENSE">License</a></li>
                    <li><a href="https://pimenov.com.ua">Author</a></li>
                    <li><a href="https://forum.metroui.org.ua">Forum</a></li>
                    <li><a href="https://github.com/olton/Metro-UI-CSS/issues">Issues</a></li>
                    <li><a href="https://github.com/olton/Metro-UI-CSS/releases">Releases</a></li>
                </ul>
            </div>

            <div class="text-center m-10">
                <span class="h2"><span class="fg-cyan">Made in </span><span class="fg-yellow">Ukraine</span></span>
            </div>

            <div class="text-center mt-10 reduce-1">
                Metro 4 (Metro UI CSS) &copy; 2012-2019 by <a href="https://pimenov.com.ua" class="no-wrap">Sergey Pimenov</a>.
                <br />
                <span class="no-wrap">Domain by <a href="https://imena.ua/">Imena.ua</a>.</span>
                <span class="no-wrap">Hosting by <a href="https://mirohost.net/">Mirohost</a>.</span>
                <br/>
                <span class="no-wrap">Metro CDN by <a href="https://www.keycdn.com/">KeyCDN</a>.</span>
                <br/>
                <span class="no-wrap">IDE PhpStorm by <a href="https://www.jetbrains.com/">JetBrains</a>.</span>
                <br />
                Currently <span class="version-number-full"></span>. Code licensed <a href="https://github.com/olton/Metro-UI-CSS/blob/master/LICENSE">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.
            </div>
        </div>
    </footer>


    <script src="metro/js/metro.js?ver=@@b-version"></script>
    <script>
        $(".version-number").html(Metro.ver());
        // $(function(){
        //     window.onscroll = function(){
        //         var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
        //         if (winScroll > 50) {
        //             $("#header").addClass("scrolled-header");
        //         } else {
        //             $("#header").removeClass("scrolled-header");
        //         }
        //     };
        // });
    </script>
    <!-- ads-script -->
    <!-- ga-script -->
    <!-- hit-ua -->

</body>
</html>